<template>
  <div id="home">
    <nav-bar class="home-nav"> <div slot="center">购物街</div></nav-bar>
    <TabControl v-show="isTabFixed" class="tab-control"  :titles="titles" @tabClick="tabClick" ref="TabControlTop" />
    <Scroll class="content"
             ref="scroll"
            :probeType="3"
            :pullUpLoad="true"
            @scroll="scroll"
            @pullingUp="loadMore">

          <div>
            <HomeSwiper :banners="bannerList" @swiperImageLoad="swiperImageLoad" />
            <HomeRecommend :recommends="recommends" />
            <HomeFeture/>
            <TabControl v-show="!isTabFixed"  :titles="titles" @tabClick="tabClick" ref="TabControlButtom" />
            <GoodsList :goods="showGoods" ></GoodsList>
          </div>
    </Scroll>
    <back-top @click.native="backClick" v-if="isShowBackTop"></back-top>
  </div>
</template>

<script>
//方法
import {getHomeMultidata,getHomeGoods} from 'network/home'
//import {debounce} from 'common/util'
import {itemListenerMixin,backTopMixin} from 'common/mixin'
//组件
import HomeSwiper from './childComps/HomeSwiper'
import HomeRecommend from './childComps/HomeRecommend'
import HomeFeture from './childComps/HomeFeture'

import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from 'components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'


export default {
  name:'Home',
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommend,
    HomeFeture,
    TabControl,
    GoodsList,
    Scroll
  },
  mixins:[itemListenerMixin,backTopMixin],
  data() {
      return {
        bannerList: [],
        recommends: [],
        titles:['流行','新款','精选'],
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]}
        },
        currentType:'pop',  //当前商品数据类型
        tabControlOffsetTop: 0, //tabcontrol的offsettop值
        isTabFixed:false,  //tabcontrol是否吸顶
        saveY:0
      }
      
  },
  created() {
    //1.请求多个数据 -- 轮播图+导航
    this.getHomeMultidata()
    //2.请求商品数据
    this.getGoods('pop')
    this.getGoods('new')
    this.getGoods('sell')

    
  },
  mounted() {
    //下面代码已被放入混入内容
    // debounce 被我们抽取出来，放在了utils.js里面
    // const refresh = debounce(this.$refs.scroll.refresh,500)

    // this.itemImageListener = ()=>{
    //   refresh()
    // } 

    // this.$bus.$on('itemImageLoad',this.itemImageListener)

    //3.监听gooditem中图片加载完成！
    // this.$bus.$on('itemImageLoad',()=>{
    //   // console.log('aaa')
    //   // this.$refs.scroll.refresh()
    //   refresh()
    // }) 
  },
  activated() {  //离开页面后再次进入就会调用
    //页面回来的时候跳到原来位置
    this.$refs.scroll.myScrollTo(this.saveY)
    this.$refs.scroll.refresh()
  },
  deactivated() {  //监听页面离开
    //记住下拉的位置
    this.saveY = this.$refs.scroll.getScrollY()

    //取消全局监听事件
    this.$bus.$off('itemImageLoad',this.itemImageListener)
  },
  computed:{
    showGoods(){
      return this.goods[this.currentType].list
    }
  },
  destroyed() {
    
  },
  methods: {
    //业务
    scroll(postion){  //监听scroll高度
      this.isShowBackTop = (-postion.y) > 1000

      this.isTabFixed =  (-postion.y)>this.tabControlOffsetTop  //判断tabcontrol是否需要吸顶

      
    },
    loadMore(){  //加载更多
      this.getGoods(this.currentType)
    },
    swiperImageLoad(){  //监听轮播图图片加载
      //4.获取tabcontrol的offsetTop
      // 所有组件都有一个$el ： 获取组件中的元素
      this.tabControlOffsetTop = this.$refs.TabControlButtom.$el.offsetTop
      
    },
    /* 网络请求相关方法 */
    getHomeMultidata(){
        getHomeMultidata().then(value=>{
          if(value){
            this.bannerList = value.data.banner.list
            this.recommends = value.data.recommend.list
          }
        })
    },
    getGoods(type){
      const page = this.goods[type].page +1
      getHomeGoods(type,page)
        .then(res=>{
          if(res){
            this.goods[type].list = this.goods[type].list.concat(res.data.list)
            this.goods[type].page += 1 
            // console.log(`${type}数据：`) 
            // console.log(this.goods[type].list)
            this.$refs.scroll.scroll.refresh()
            this.$refs.scroll.finishPullUp()
          }
        })
    },
    /* 事件监听相关方法 */
    tabClick(index){   //tabcontrol切换标签
      switch(index){
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break  
      }
      this.$refs.TabControlTop.currentIndex = index
      this.$refs.TabControlButtom.currentIndex = index
    }
  },
}
</script>

<style scope>
  .TabFixed{
    position: fixed;
    left: 0;
    top: 44px;
    right: 0;
  }
  #home {
    height: 100vh;
    position: relative;
  }

  .home-nav {
    background-color: var(--color-tint);
    color: #fff;
    position: relative;
    z-index: 9;
  }

  .tab-control {
    position: relative;
    z-index: 9;
  }

  .content {
    position: absolute;
    top: 44px;
    bottom:49px;
    left: 0;
    right: 0;
  }
</style>